<template>
    <view class="main">
        <button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
            <image class="avatar" :src="avatarUrl"></image>
        </button>
        <uni-forms ref="form" :modelValue="formData" :rules="rules" class="content-info">
            <uni-forms-item label="昵称" required label-width="130" name="nickName">
                <uni-easyinput type="nickname" v-model="formData.nickName" placeholder="请输入昵称" />
            </uni-forms-item>
        </uni-forms>
        <view class="btn-area">
            <button type="primary" @click="handleSubmit">提交</button>
        </view>
    </view>
</template>
<style lang="scss" scoped>
.main {
    position: relative;
    padding: 10rpx;
    .uni-forms {
        padding: 0px 26rpx;
    }
    ::v-deep:avatar-wrapper {
        border: none !important;
    }
}
.avatar-wrapper {
    width: 100rpx;
    height: 100rpx;
    margin-top: 95rpx;
    margin-bottom: 90rpx;
    padding: 0px;
    border: none;
}
.avatar-wrapper image {
    width: 100%;
    height: 100%;
}
.content-info {
    padding: 20rpx;
}
.btn-area {
    position: fixed;
    bottom: 70rpx;
    width: calc(100% - 20rpx);
    button {
        width: 100%;
    }
}
</style>
<script>
const defaultAvatarUrl = 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0';
export default {
    data() {
        return {
            avatarUrl: defaultAvatarUrl,
            formData: {
                nickName: '',
            },
            customRules: {
                nickName: {
                    rules: [
                        {
                            required: true,
                            errorMessage: '昵称不能为空',
                        },
                    ],
                },
            },
        };
    },
    onReady() {
        // 设置自定义表单校验规则，必须在节点渲染完毕后执行
        this.$refs.form.setRules(this.customRules);
    },
    onLoad(options) {
        this.formData.openId = options.openId;
    },
    methods: {
        onChooseAvatar(e) {
            const { avatarUrl } = e.detail;
            this.avatarUrl = avatarUrl;
        },
        handleSubmit() {
            uni.showLoading();
            this.$refs.form
                .validate()
                .then(async res => {
                    uni.hideLoading();
                    //掉保存接口
                    this.formData.avatarUrl = this.avatarUrl;
                    this.formData.createTime = new Date().getTime();
                    this.formData.updateTime = new Date().getTime();
                    const feild = ['score', 'winningCount', 'gamesCount', 'winningRate', 'losingCount', 'totalScore'];
                    feild.forEach(item => {
                        this.formData[item] = 0;
                    });
                    console.log(this.formData, 'this.formData');
                    // 调用user云函数进行登录/注册
                    const result = await uniCloud.callFunction({
                        name: 'user',
                        data: {
                            action: 'login',
                            data: this.formData,
                        },
                    });
                    if (result.result.code == -1) {
                        // 保存完整的用户信息到本地
                        uni.setStorageSync('userInfo', this.formData);
                        //跳转到个人中心
                        uni.switchTab({
                            url: '/pages/profile/profile',
                        });
                    } else {
                        throw new Error(result.result.msg || '登录失败');
                    }
                })
                .catch(err => {
                    uni.hideLoading();
                    console.log('表单错误信息：', err);
                });
        },
    },
};
</script>

<style></style>
